
<template>
  <div id="big-data-container" class="big-data-container">
    <div class="head">
   <span class="timeclass" style="float: left; padding: 0px 20px" > <span  @click="goFunHome()" style=" border: 1px solid #3399ff;
    cursor: pointer;
    border-radius: 6px;
    padding: 0px 20px;
    margin-right:20px;
    ">首页 </span> {{ date }}</span>
      <h1>
        富龙滑雪场营收数据统计
      </h1>
    </div>
    <div class="data-container">
      <div class="data-left">
        <div class="data-left-item">
          <div class="title">各项营收占比(万元)</div>
          <div id="chart-left-1" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-left-item" style="height: calc(100% - 30px)">
          <div class="title">客源地分析</div>
          <div class="scroll_item" style="margin:0;background:#0066FF">
            <div class="isddd">序号</div>
            <div class="isddd">排名</div>
            <div class="isddd">地区名称</div>
            <div class="isddd">购买数量</div>
          </div>
              <div class="InfiniteScroll">
                <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
                    <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                        <div ref="scrollItemBox">
                            <div class="scroll_item" v-for="(item, index) in listData" :key="index" @click="goFun()">
                                
                                <div class="isddd">{{index+1}}</div>
                                <div class="isddd">{{item.title}}</div>
                                <div class="isddd">{{item.name}}</div>
                                <div class="isddd">{{item.num}}</div>
                            </div>
                        </div>
                        <div v-html="copyHtml"></div>
                    </div>
                </div>
            </div>
          <div class="data-foot-line"></div>
        </div>

        <div class="data-left-item data-left-item-4; " >
          <div class="title">购票情况</div> 
          <div id="chart-left-3" style="height: calc(100% - 60px)"></div>
           <div class="data-foot-line"></div>
        </div>
      </div>
      <div class="data-center">
        <!-- <div class="title">中间位置</div> -->
        <div class="data-left-item" style="padding-top: 50px;margin-bottom: 0.9rem;">
          <div class="center-top-num-flex">
            <div class="item">
              <div class="text">当前入园人次</div>
              <div class="num">{{ contentNum.current }}</div>
            </div>
            <div class="item">
              <div class="text">累计营收（万元）</div>
              <div class="num">{{ contentNum.revenue }}</div>
            </div>
            <div class="item">
              <div class="text">预算完成比(区间)</div>
              <div class="num">{{ contentNum.budget }}%</div>
            </div>
            <div class="data-foot-line"></div>
          </div>
          <iview-circle :size="200" style="padding: 8px 0"></iview-circle>
          <div class="data-foot-line"></div>
        </div>
        <div class='center-top' style="height: calc(100% - 30px); margin-bottom: 0.9rem;">
          <div class="title">各项营收趋势(万元)</div>
          <div
            id="chart-center"
            class="chart-center"
            style="height: calc(100% - 50px) "
          ></div>
          <div class="data-foot-line"></div>
        </div>
      </div>

      <div class="data-right">
        <div class="data-right-item">
          <div class="title">核销占比</div>
          <div id="chart-right-1" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-right-item right-3">
          <div class="title">热销产品TOP5</div>
          <div id="chart-right-2" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
  
        <div class="data-right-item right-3" >
          <div class="title">渠道占比</div>
          <div id="chart-right-4" style="height: calc(100% - 30px)"></div>
          <div class="data-foot-line"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import 'echarts/map/js/china'
import china from 'echarts/map/json/china.json'
import Community from '@/../src/components/Community/index.vue'
import Cow from '@/../src/components/Community/cow.vue'
import Question from '@/../src/components/Community/question.vue'
import flex from '@/../src/views/charts/flex.vue'
import {
  chartLeft1,
  chartRight2,
  chartCenter,
  chartRight1,
  chartLeft3,
  chartRight4
} from './bigdata/chart-options'
import IviewCircle from './bigdata/IviewCircle'
import './bigdata/layout.less'
let timertwas = null
var echarts = require('echarts')
export default {
  components: {
    'iview-circle': IviewCircle
  },
  data () {
    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    return {
      date: _this.formatLongDate(new Date()),
      contentNum: {
        current: 0,
        revenue: 0,
        budget: 0
      },
      scrollTop: 0, // 列表滚动高度
      speed: 15, // 滚动的速度

      listData:  JSON.parse(localStorage.getItem("aDlist")).data, // 表示有多少个列表项
      copyHtml: '' // 复制多一份防止滚动到后面出现空白
    }
  },
  beforeCreate(){
    
  },
  mounted () {

    this.initScroll()

    var $chartLeft1 = echarts.init(document.getElementById('chart-left-1'))
    $chartLeft1.setOption(chartLeft1)
    $chartLeft1.resize()

    var $chartLeft3 = echarts.init(document.getElementById('chart-left-3'))
    $chartLeft3.setOption(chartLeft3)
    $chartLeft3.resize()

    var $chartRight1 = echarts.init(document.getElementById('chart-right-1'))
    $chartRight1.setOption(chartRight1)
    $chartRight1.resize()

    var $chartRight2 = echarts.init(document.getElementById('chart-right-2'))
    $chartRight2.setOption(chartRight2)
    $chartRight2.resize()

    var $chartRight4 = echarts.init(document.getElementById('chart-right-4'))
    $chartRight4.setOption(chartRight4)
    $chartRight4.resize()

    var $chartCenter = echarts.init(document.getElementById('chart-center'))
    $chartCenter.setOption(chartCenter)
    $chartCenter.resize()

    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    // this.timer = setInterval(() => {
    //    _this.date = _this.formatLongDate(new Date());
    //   this.http.get('https://sr.boss.i-town.cn/kuaibao/skifield', true).then(reslut => {
    //     this.contentNum.current = Number(reslut.data.realTimes)
    //     this.contentNum.revenue = Number(reslut.data.dayTotal)
    //   })
    // }, 1000)

  },
  methods: {

    goFun(){
      this.$router.push('/Customer');
    },
    goFunHome(){
      this.$router.push('/home');
    },
    initScroll () {
      this.$nextTick(() => {
        this.copyHtml = this.$refs.scrollItemBox.innerHTML
        this.startScroll()
      })
    },
    // 鼠标移入停止滚动
    mEnter () {
      clearInterval(timertwas)
    },
    // 鼠标移出继续滚动
    mLeave () {
      this.startScroll()
    },
    // 开始滚动
    startScroll () {
      timertwas = setInterval(this.scroll, this.speed)
    },
    // 滚动处理方法
    scroll () {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = this.$refs.scrollItemBox.offsetHeight
      console.log(this.$refs.scrollItemBox.offsetHeight)
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },
    formatLongDate (date) {
      let myyear = date.getFullYear()
      let mymonth = date.getMonth() + 1
      let myweekday = date.getDate()
      let myHour = date.getHours()
      let myMin = date.getMinutes()
      let mySec = date.getSeconds()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      if (myHour < 10) {
        myHour = '0' + myHour
      }
      if (myMin < 10) {
        myMin = '0' + myMin
      }
      if (mySec < 10) {
        mySec = '0' + mySec
      }
      return (
        myyear +
        '-' +
        mymonth +
        '-' +
        myweekday +
        ' ' +
        myHour +
        ':' +
        myMin +
        ':' +
        mySec
      )
    },
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>
<style scoped lang="less">
.data-left-item-4 {
  display: flex;
  .item {
    height: 100%;
    width: 33%;
    padding-top: 30px;
  }
}
.center-top-num-flex {
  height: 80px;
  padding-top: 7px;
  display: flex;
  .item {
    flex: 1;
    text-align: center;
  }
  .text {
    color: #fcf0d8;
    font-size: 14px;
  }
  .num {
    font-size: 34px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
      Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
      sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: bold;
    color: #67caca;
  }
}
.left_top_main {
  width: 100%;
  height: 100%;
  position: relative;
}

.left_top_main .left {
  width: 200px;
  height: 100%;
  background: #ffccaa;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  padding-top: 80px;
  box-sizing: border-box;
}

.right-3 {
  display: flex;
  flex-direction: column;
  /* margin-top: 20px; */
}

.right-3 .right-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-3 .item {
  text-align: left;
  border-bottom: 1px solid #549069;
  flex: 1;
  display: flex;
  padding: 5px 10px;
  margin: 0 10px;
  font-size: 14px;
  line-height: 30px;
}

.right-3 .item:last-child {
  border-bottom: 0;
}

.right-3 .item > div {
  color: white;
}

.right-3 .top {
  width: 60px;
  position: relative;
}

.right-3 .top span {
  position: absolute;
  width: 20px;
  line-height: 20px;
  top: 5px;
  text-align: center;
  border-radius: 5px;
}

.right-3 .top-1 span {
  background: #e80d0d;
}

.right-3 .top-2 span {
  background: #00c935;
}

.right-3 .top-3 span {
  background: #0083f4;
}

.right-3 .num {
  width: 88px;
}

.right-3 .pro-name {
  flex: 1;
}
.InfiniteScroll {
    box-sizing: border-box;

}

.scroll_parent_box {
    width: 100%;
    height: 20vh;

    overflow: hidden;
    box-sizing: border-box;

}

.scroll_list {
    transition: all 0ms ease-in 0s
}
.scroll_item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color:#67caca;
    margin-bottom:10px;
    border-radius:5px;
    cursor:pointer;
    display:flex;
    justify-content: space-between ;
    padding:0 15px;

    
}
.scroll_item div{
  color:#ffffff;
}
.scroll_item:hover{
    background:#0066FF;
    color:#ffffff;
}
.isddd{
  width:25%;

}
</style>
